<template>
  <div id="subclass-info-list">
    <div class="card">
      <div class="card-header bg-info text-white">舱位信息</div>
      <div class="card-body">
        <form class="row">
          <div class="col-1">
            <input
              type="textfield"
              class="form-control"
              placeholder="航空公司"
              v-model.trim="carrier0"
              size="10"
            />
          </div>
          <div class="col-1">
            <input
              type="textfield"
              class="form-control"
              placeholder="舱位"
              v-model.trim="subclass0"
              size="6"
            />
          </div>
          <div class="col">
            <button
              type="button"
              class="btn btn-primary ms-2"
              @click.stop="search()"
            >
              查找
            </button>
            <button
              type="button"
              class="btn btn-secondary ms-2"
              @click.stop="resetSearch()"
            >
              重置
            </button>

            <a
              href="javascript:void(0)"
              class="ms-1"
              @click.stop="quickSearch('MU')"
              >MU</a
            >
            <a
              href="javascript:void(0)"
              class="ms-1"
              @click.stop="quickSearch('CZ')"
              >CZ</a
            >
            <a
              href="javascript:void(0)"
              class="ms-1"
              @click.stop="quickSearch('CA')"
              >CA</a
            >

            <template v-if="isDataAdmin">
              <a
                href="javascript:void(0)"
                class="btn btn-danger ms-5 me-5"
                @click="editTimeFrame()"
                >修改退改时间点</a
              >
              <a
                href="javascript:void(0)"
                class="btn btn-success ms-auto"
                @click="newSubclass()"
                >新建</a
              >
            </template>
          </div>
        </form>
      </div>
    </div>
    <table class="table table-sm" v-if="frameEditing">
      <caption>
        修改航司退改条件的适用时间点
      </caption>
      <thead>
        <tr>
          <th>航司</th>
          <th>序号</th>
          <th>最大时间</th>
          <th>包含</th>
          <th>最小时间</th>
          <th>包含</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="info of timeWindows">
          <td>
            {{ info.carrier }}
          </td>
          <td>
            {{ info.windowOrder }}
          </td>
          <td>
            <input
              type="text"
              class="text-center form-control"
              v-model.number="info.maxHours"
              :disabled="info.windowOrder === 1"
            />
            <span class="text-muted small">注意：0表示不限</span>
          </td>
          <td>
            <label class="form-check-label">包含最大时间：</label>
            <div class="form-check form-check-inline">
              <input
                class="form-check-input"
                type="radio"
                value="0"
                v-model.number="info.maxIncluded"
                :disabled="info.windowOrder === 1"
              />
              <label class="form-check-label">否</label>
            </div>
            <div class="form-check form-check-inline">
              <input
                class="form-check-input"
                type="radio"
                value="1"
                v-model.number="info.maxIncluded"
                :disabled="info.windowOrder === 1"
              />
              <label class="form-check-label">是</label>
            </div>
          </td>
          <td>
            <input
              type="text"
              class="text-center form-control"
              v-model.number="info.minHours"
              :disabled="info.windowOrder === 4"
            />
            <span class="text-muted small">注意：0表示不限</span>
          </td>
          <td>
            <label class="form-check-label">包含最小时间: </label>
            <div class="form-check form-check-inline">
              <input
                class="form-check-input"
                type="radio"
                value="0"
                v-model.number="info.minIncluded"
                :disabled="info.windowOrder === 4"
              />
              <label class="form-check-label">否</label>
            </div>
            <div class="form-check form-check-inline">
              <input
                class="form-check-input"
                type="radio"
                value="1"
                v-model.number="info.minIncluded"
                :disabled="info.windowOrder === 4"
              />
              <label class="form-check-label">是</label>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="6" class="text-center">
            <button
              type="button"
              class="btn btn-primary"
              v-on:click="saveTimeFrame()"
            >
              保存
            </button>
            <button
              type="button"
              class="btn btn-secondary btn-sm ms-5"
              v-on:click="cancelTimeFrame()"
            >
              取消
            </button>
          </td>
        </tr>
      </tbody>
    </table>
    <table class="table table-sm" v-if="inputing">
      <thead>
        <tr>
          <th rowspan="2" class="text-center">航司</th>
          <th rowspan="2" class="text-center">舱位</th>
          <th rowspan="2" class="text-center">乘客</th>
          <th rowspan="2" class="text-center">类型</th>
          <th rowspan="2" class="text-center">描述</th>
          <th rowspan="2" class="text-center">折扣</th>
          <th rowspan="2" class="text-center">代理费</th>
          <th rowspan="2" class="text-center">OPEN</th>
          <th rowspan="2" class="text-center">自愿签转</th>
          <th colspan="4" class="text-center bg-warning">自愿变更</th>
          <th colspan="4" class="text-center bg-info">自愿退票</th>
        </tr>
        <tr>
          <th>{{ this.changeLabel1 }}</th>
          <th>{{ this.changeLabel2 }}</th>
          <th>{{ this.changeLabel3 }}</th>
          <th>{{ this.changeLabel4 }}</th>
          <th>{{ this.refundLabel1 }}</th>
          <th>{{ this.refundLabel2 }}</th>
          <th>{{ this.refundLabel3 }}</th>
          <th>{{ this.refundLabel4 }}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input
              type="text"
              class="text-center form-control"
              　v-model="carrier"
              size="3"
            />
          </td>
          <td>
            <input
              type="text"
              class="text-center form-control"
              　v-model="subclass"
              size="3"
            />
          </td>
          <td>
            <select class="form-select" v-model.number="psgType">
              <option value="0">成人</option>
              <option value="1">儿童</option>
              <option value="2">婴儿</option>
              <option value="8">伤残军/警</option>
            </select>
          </td>
          <td>
            <select class="form-select" v-model.number="cabinType">
              <option value="10">头等舱</option>
              <option value="20">商务舱</option>
              <option value="30">经济舱</option>
              <option value="40">超级经济舱</option>
            </select>
          </td>
          <td>
            <input
              type="text"
              class="text-center form-control"
              v-model="subclassDesc"
              size="5"
            />
          </td>
          <td>
            <input
              type="text"
              class="text-center form-control"
              v-model.number="discount"
              size="5"
            />
          </td>
          <td>
            <input
              type="text"
              class="text-center form-control"
              v-model.number="commission"
              size="5"
            />
          </td>
          <td>
            <select class="form-select" v-model.number="openAllowed">
              <option value="0">不可</option>
              <option value="1">允许</option>
            </select>
          </td>
          <td>
            <select class="form-select" v-model.number="endorsable">
              <option value="0">不可</option>
              <option value="1">允许</option>
            </select>
          </td>

          <td>
            <input
              type="text"
              class="text-center align-center form-control"
              v-model.number="changeRate1"
              size="5"
            />
          </td>
          <td>
            <input
              type="text"
              class="text-center form-control"
              v-model.number="changeRate2"
              size="5"
            />
          </td>
          <td>
            <input
              type="text"
              class="text-center form-control"
              v-model.number="changeRate3"
              size="5"
            />
          </td>
          <td>
            <input
              type="text"
              class="text-center form-control "
              v-model.number="changeRate4"
              size="5"
            />
          </td>

          <td>
            <input
              type="text"
              class="text-center form-control"
              v-model.number="refundRate1"
              size="5"
            />
          </td>
          <td>
            <input
              type="text"
              class="text-center form-control"
              v-model.number="refundRate2"
              size="5"
            />
          </td>
          <td>
            <input
              type="text"
              class="text-center form-control"
              v-model.number="refundRate3"
              size="5"
            />
          </td>
          <td>
            <input
              type="text"
              class="text-center form-control"
              v-model.number="refundRate4"
              size="5"
            />
          </td>
        </tr>
        <tr>
          <td colspan="6">
            <div class="form-check" v-if="id === 0">
              <input
                type="checkbox"
                class="form-check-input"
                v-model="keepInputing"
              />
              <label class="form-check-label">继续录入</label>
            </div>
          </td>
          <td colspan="8">
            <button
              type="button"
              class="btn btn-primary"
              v-on:click="saveSubclass()"
            >
              保存
            </button>
            <button
              type="button"
              class="btn btn-secondary btn-sm ms-5"
              v-on:click="closeInput()"
            >
              关闭
            </button>
          </td>
        </tr>
      </tbody>
    </table>

    <table class="table table-striped table-sm">
      <thead>
        <tr>
          <th rowspan="2" class="text-center">航司</th>
          <th rowspan="2" class="text-center">舱位</th>
          <th rowspan="2" class="text-center">乘客</th>
          <th rowspan="2" class="text-center">描述</th>
          <th rowspan="2" class="text-center">折扣</th>
          <th rowspan="2" class="text-center">代理费</th>
          <th rowspan="2" class="text-center">OPEN</th>
          <th rowspan="2" class="text-center">自愿签转</th>
          <th colspan="4" class="text-center bg-warning text-white">
            自 愿 变 更
          </th>
          <th colspan="4" class="text-center bg-info text-white">
            自 愿 退 票
          </th>
          <th></th>
        </tr>
        <tr>
          <th>{{ this.changeLabel1 }}</th>
          <th>{{ this.changeLabel2 }}</th>
          <th>{{ this.changeLabel3 }}</th>
          <th>{{ this.changeLabel4 }}</th>
          <th>{{ this.refundLabel1 }}</th>
          <th>{{ this.refundLabel2 }}</th>
          <th>{{ this.refundLabel3 }}</th>
          <th>{{ this.refundLabel4 }}</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(info, index) in dataList" :key="index">
          <td>{{ info.carrier }}</td>
          <td>
            {{ info.subclass }}
            <span v-if="info.cabinType === 10" class="small">头等舱</span>
            <span v-if="info.cabinType === 20" class="small">商务舱</span>
            <span v-if="info.cabinType === 30" class="small">经济舱</span>
            <span v-if="info.cabinType === 40" class="small">超级经济舱</span>
          </td>
          <td>
            <span v-if="info.psgType === 0">成人</span>
            <span v-if="info.psgType === 1">儿童</span>
            <span v-if="info.psgType === 2">婴儿</span>
            <span v-if="info.psgType === 8">伤残军人/警察</span>
          </td>
          <td>{{ info.subclassDesc }}</td>
          <td>{{ info.discount }}</td>
          <td>{{ info.commission }}</td>
          <td>{{ showAllowDesc(info.openAllowed) }}</td>
          <td>{{ showAllowDesc(info.endorsable) }}</td>
          <td class="text-center">
            {{ showFeeRateDesc(info.changeFeeRate1) }}
          </td>
          <td class="text-center">
            {{ showFeeRateDesc(info.changeFeeRate2) }}
          </td>
          <td class="text-center">
            {{ showFeeRateDesc(info.changeFeeRate3) }}
          </td>
          <td class="text-center">
            {{ showFeeRateDesc(info.changeFeeRate4) }}
          </td>
          <td class="text-center">
            {{ showFeeRateDesc(info.refundFeeRate1) }}
          </td>
          <td class="text-center">
            {{ showFeeRateDesc(info.refundFeeRate2) }}
          </td>
          <td class="text-center">
            {{ showFeeRateDesc(info.refundFeeRate3) }}
          </td>
          <td class="text-center">
            {{ showFeeRateDesc(info.refundFeeRate4) }}
          </td>

          <td v-if="isDataAdmin">
            <a href="javascript:void(0)" v-on:click="editSubclass(index)"
              >修改</a
            >
            <a
              href="javascript:void(0)"
              v-on:click="copySubclass(index)"
              class="ms-2"
              >复制</a
            >
          </td>
        </tr>
      </tbody>
    </table>
    <div>
      备注：成人舱位的折扣数仅供参考；儿童、婴儿、伤残军人/警察舱位的折扣数表示相同成人舱位的价格的百分数。
    </div>
    <nav id="pagination-box" class="float-end">
      <my-pagination
        name="pagination"
        :row-count="sc.rowCount"
        :page-total="sc.pageTotal"
        :page-no="sc.pageNo"
        @next-page="nextPage"
        @prev-page="prevPage"
        @direct-page="directPage"
      ></my-pagination>
    </nav>
  </div>
</template>

<script>
import MyPagination from "@/components/my-pagination.vue";
import $ from "jquery";
import {
  searchSubclasses,
  saveSubclass,
  searchFlightConditionTimeWindow,
  saveFlightConditionTimeWindow,
} from "@/api/basic-data.js";

export default {
  components: {
    MyPagination,
  },
  data() {
    return {
      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 25,
        pageTotal: 0,
      },
      carrier0: "MU",
      subclass0: "",

      id: 0,
      carrier: "",
      subclass: "",
      psgType: 0,
      cabinType: 30,
      subclassDesc: "",
      discount: 100,
      commission: 0,
      openAllowed: 0,
      endorsable: 0,
      refundRate1: 0,
      refundRate2: 0,
      refundRate3: 0,
      refundRate4: 0,
      changeRate1: 0,
      changeRate2: 0,
      changeRate3: 0,
      changeRate4: 0,

      dataList: [],
      timeWindows: [],

      keepInputing: false,
      inputing: false,
      frameEditing: false,

      refundLabel1: "退票手续费1",
      refundLabel2: "退票手续费2",
      refundLabel3: "退票手续费3",
      refundLabel4: "退票手续费4",
      changeLabel1: "改签手续费1",
      changeLabel2: "改签手续费2",
      changeLabel3: "改签手续费3",
      changeLabel4: "改签手续费4",
    };
  },
  computed: {
    isDataAdmin() {
      return this.$store.getters.isDataAdmin;
    },
  },
  mounted: function () {
    if (window.matchMedia("(max-width: 576px)").matches) {
      this.$router.replace("/h5/data/subclasses");
    } else {
      this.search();
    }
  },
  watch: {
    timeWindows() {
      // console.log(this.timeWindows)
      this.changeTimeWindowLabels();
    },
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    quickSearch: function (carrier) {
      this.carrier0 = carrier;
      this.subclass0 = "";
      this.search();
    },
    search: function () {
      if (this.carrier0.length != 2) {
        this.showErrMsg("请先输入航司代码");
        return;
      }
      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
        "sc.carrier": this.carrier0,
        "sc.subclass": this.subclass0,
      };
      searchSubclasses(params, (jsonResult) => {
        this.dataList = jsonResult.dataList;
        this.sc = jsonResult.page;
      });

      searchFlightConditionTimeWindow({ carrier: this.carrier0 }, (v) => {
        this.timeWindows = v;
      });
    },
    reset: function () {
      this.id = 0;
      this.carrier = "";
      this.cabinType = 30;
      this.subclass = "";
      this.psgType = 0;
      this.subclassDesc = "";
      this.discount = 100;
      this.commission = 0;
      this.openAllowed = 0;
      this.endorsable = 0;

      this.refundRate1 = 0;
      this.refundRate2 = 0;
      this.refundRate3 = 0;
      this.refundRate4 = 0;

      this.changeRate1 = 0;
      this.chagneRate2 = 0;
      this.changeRate3 = 0;
      this.changeRate4 = 0;
    },
    newSubclass: function () {
      this.reset();
      this.carrier = this.carrier0;
      this.inputing = true;
    },
    closeInput: function () {
      this.inputing = false;
    },
    saveSubclass: function () {
      const params = {
        id: this.id,
        carrier: this.carrier,
        subclass: this.subclass,
        psgType: this.psgType,
        cabinType: this.cabinType,
        subclassDesc: this.subclassDesc,
        discount: this.discount,
        commission: this.commission,
        openAllowed: this.openAllowed,
        endorsable: this.endorsable,
        refundFeeRate1: this.refundRate1,
        refundFeeRate2: this.refundRate2,
        refundFeeRate3: this.refundRate3,
        refundFeeRate4: this.refundRate4,
        changeFeeRate1: this.changeRate1,
        changeFeeRate2: this.changeRate2,
        changeFeeRate3: this.changeRate3,
        changeFeeRate4: this.changeRate4,
      };

      // console.log(params)

      saveSubclass(params, (jsonResult) => {
        if (jsonResult.status === "OK") {
          if (this.keepInputing === false) {
            // $('#modalNew').modal('hide')
            this.inputing = false;
          }

          this.search();
          this.showErrMsg("保存成功");
        } else {
          this.showErrMsg(jsonResult.errmsg);
        }
      });
    },
    editSubclass: function (index) {
      const info = this.dataList[index];

      this.id = info.id;
      this.carrier = info.carrier;
      this.subclass = info.subclass;
      this.psgType = info.psgType;
      this.cabinType = info.cabinType;
      this.subclassDesc = info.subclassDesc;
      this.discount = info.discount;
      this.commission = info.commission;
      this.openAllowed = info.openAllowed;
      this.endorsable = info.endorsable;

      this.refundRate1 = info.refundFeeRate1;
      this.refundRate2 = info.refundFeeRate2;
      this.refundRate3 = info.refundFeeRate3;
      this.refundRate4 = info.refundFeeRate4;

      this.changeRate1 = info.changeFeeRate1;
      this.changeRate2 = info.changeFeeRate2;
      this.changeRate3 = info.changeFeeRate3;
      this.changeRate4 = info.changeFeeRate4;

      this.keepInputing = false;

      this.inputing = true;
    },
    copySubclass: function (index) {
      this.editSubclass(index);
      this.id = 0;
    },
    changeTimeWindowLabels: function () {
      for (let t of this.timeWindows) {
        // console.log(t.windowOrder)
        switch (t.windowOrder) {
          case 1:
            this.refundLabel1 = this.showTimeWindowDesc(t);
            this.changeLabel1 = this.showTimeWindowDesc(t);
            break;
          case 2:
            this.refundLabel2 = this.showTimeWindowDesc(t);
            this.changeLabel2 = this.showTimeWindowDesc(t);
            break;
          case 3:
            this.refundLabel3 = this.showTimeWindowDesc(t);
            this.changeLabel3 = this.showTimeWindowDesc(t);
            break;
          case 4:
            this.refundLabel4 = this.showTimeWindowDesc(t);
            this.changeLabel4 = this.showTimeWindowDesc(t);
            break;
        }
      }
    },
    showTimeWindowDesc: function (t) {
      let desc = "＠";
      if (t.maxHours != 0) {
        let desc0 = t.maxHours + "H";
        if (t.maxIncluded == 1) {
          desc0 += " => ";
        } else {
          desc0 += " > ";
        }
        desc = desc0 + desc;
      }

      if (t.minHours != 0) {
        let desc0;
        if (t.minIncluded == 1) {
          desc0 = " >= ";
        } else {
          desc0 = " > ";
        }
        desc0 += t.minHours + "H";
        desc = desc + desc0;
      }

      return desc;
    },
    showFeeRateDesc: function (feeRate) {
      if (feeRate == 0) {
        return "免费";
      } else {
        return feeRate + "%";
      }
    },
    showAllowDesc: function (status) {
      if (status === 0) {
        return "不允许";
      } else if (status === 1) {
        return "允许";
      } else {
        return status;
      }
    },
    resetSearch: function () {
      this.carrier0 = "";
      this.subclass0 = "";

      this.sc.pageNo = 1;
    },
    editTimeFrame: function () {
      this.frameEditing = true;
    },
    cancelTimeFrame: function () {
      this.frameEditing = false;
      this.search();
    },
    saveTimeFrame: function () {
      const jsonStr = JSON.stringify(this.timeWindows);
      // console.log(JSON.stringify(this.timeWindows))
      saveFlightConditionTimeWindow(jsonStr, (v) => {
        if (v.status === "OK") {
          this.frameEditing = false;
          this.search();
          this.showErrMsg("保存成功");
        } else {
          this.showErrMsg(v.errmsg);
        }
      });
    },
    prevPage: function () {
      this.sc.pageNo = this.sc.pageNo - 1;
      if (this.sc.pageNo < 1) this.sc.pageNo = 1;
      this.search();
    },
    nextPage: function () {
      this.sc.pageNo = this.sc.pageNo + 1;
      this.search();
    },
    directPage: function (pageNo) {
      this.sc.pageNo = pageNo;
      this.search();
    },
  },
};
</script>
